import { CSSProperties } from 'react';
import { Outlet } from 'react-router-dom';
import styles from './layouy.module.scss';
import { GiBasketballBasket } from 'react-icons/gi';
import { CgProfile } from 'react-icons/cg';
import FadeLoader from 'react-spinners/FadeLoader';

const override: CSSProperties = {
	display: 'block',
	margin: '0 auto',
	borderColor: 'red'
};

export const Layout = () => {
	const isTrue = false;
	const isAuth = false;
	const isBascet = true;
	return (
		<div className={styles.beforeContainer}>
			 <ClipLoader
				color={color}
				loading={loading}
				cssOverride={override}
				size={150}
				aria-label="Loading Spinner"
				data-testid="loader"
			/>
			<div className={styles.container}>
				{isAuth ? (
					<p>Регистрация/Авторизация</p>
				) : (
					<>
						<div className={styles.basket}>
							<span className={styles.countBalls}>{isAuth ? null : 1}</span>
							<GiBasketballBasket size={50} color={isBascet ? '#ffa500' : ''} />
						</div>
						<div className={styles.profile}>
							<CgProfile size={50} />
						</div>
					</>
				)}
			</div>
			<div className={styles.outlet}>
				<Outlet />
			</div>
		</div>
	);
};
